<template>
    <div>
        <a-row :gutter="20" v-if="detail.dataSource === '外部'">
            <a-col v-for="item of newList" :key="item.id">
                <flexbox direction="column" align="flex-start" justify="space-between" style="width: 212px; height: 156px; padding: 12px; box-sizing: border-box; background: #ffffff; border-radius: 6px; border: 1px solid #d9d9d9; margin-bottom: 12px; cursor: pointer">
                    <div style="width: 100%">
                        <a-tooltip :title="`${item.requireTitle} ${item.versionNumber}`">
                            <div v-fitText class="primary-color font-w-b margin-t-8" style="width: 100%; font-size: 14px">{{ item.requireTitle }} {{ item.versionNumber }}</div>
                        </a-tooltip>
                    </div>
                    <div style="font-size: 14px">
                        <div>
                            <span style="color: #8590a5">计划需求数：</span>
                            <span v-if="item.planRequires || item.planRequires == 0">{{ item.planRequires }}</span>
                            <a-tag color="red" v-else>未填报</a-tag>
                        </div>
                        <div>
                            <span style="color: #8590a5">计划上线日期：</span>
                            <span v-if="item.planOnlineTime">{{ $filters.dateFilter(item.planOnlineTime) }}</span>
                            <a-tag color="red" v-else>未填报</a-tag>
                        </div>
                    </div>
                </flexbox>
            </a-col>
        </a-row>

        <a-row :gutter="20" v-else>
            <a-col v-for="item of newList" :key="item.id" @mouseenter="handleMouseEnter($event, item)" @mouseleave="handleMouseLeave($event, item)">
                <flexbox direction="column" align="flex-start" justify="space-between" style="width: 212px; height: 156px; padding: 12px; box-sizing: border-box; background: #ffffff; border-radius: 6px; border: 1px solid #d9d9d9; margin-bottom: 12px; cursor: pointe; position: relative">
                    <div style="width: 100%">
                        <div>
                            <a-tag color="blue" style="width: 100%; height: 28px; display: flex; align-items: center">
                                <router-link :to="{ path: '/version/versionDetail', query: { id: item.requireId } }" v-fitText style="width: 100%">
                                    {{ item.versionNumber }}
                                </router-link>
                            </a-tag>
                        </div>
                        <div v-fitText class="primary-color font-w-b margin-t-8" style="font-size: 14px">
                            {{ item.requireTitle }}
                        </div>
                    </div>
                    <div style="font-size: 14px">
                        <div>
                            <span style="color: #8590a5">计划需求数：</span>
                            <a @click="jumpToProList(1, item.planRequireIds)" v-if="item.planRequires">{{ item.planRequires }}</a>
                            <span v-else>{{ item.planRequires }}</span>
                        </div>
                        <div>
                            <span style="color: #8590a5">计划上线日期：</span>
                            <span>{{ $filters.dateFilter(item.planOnlineTime) }}</span>
                        </div>
                    </div>

                    <flexbox justify="center" class="chakan" style="position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); font-size: 14px; background: #ffffff; opacity: 0; transition: opacity 0.3s ease-in-out">
                        <router-link :to="{ path: '/version/versionDetail', query: { id: item.requireId } }">查看详情</router-link>
                        <ArrowRightOutlined class="margin-l-8 primary-color" style="font-size: 12px" />
                    </flexbox>
                </flexbox>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="tsx">
import { useRouter } from 'vue-router';
import { ArrowRightOutlined } from '@ant-design/icons-vue';
import { detailColumns } from '@/views/energyManage/analysisReport/config/detailColumns';
import { CustomTable, HDatePickerCell } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    components: {
        CustomTable,
        HDatePickerCell,
        ArrowRightOutlined
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const router = useRouter();
        const { columnsC } = detailColumns;
        const ruleTableRef = ref<any>();
        const state = reactive<any>({
            newList: [],
            locale: { emptyText: () => <a-empty description="未填报"/>}
        });
        const columns = computed(() => {
            return props.detail.dataSource === '外部' ? columnsC.slice(1) : [...columnsC, {
                title:'版本能效',
                dataIndex:'energyManage',
                width:100,
                slots: { customRender: 'energyManage' }
            }];
        });
        const jumpToProList = (type, ids) => {
            router.push({
                path: '/energyManage/analysisReport/proList',
                query: {
                    ids,
                    type,
                    systemName: props.detail.systemName
                }
            });
        };

        const handleMouseEnter = (e, val) => {
            const target = e.target.getElementsByClassName('chakan')[0];
            target.style.opacity = 1;
        };
        const handleMouseLeave = (e, val) => {
            const target = e.target.getElementsByClassName('chakan')[0];
            target.style.opacity = 0;
        };

        watch(
            () => props.list,
            (n) => {
                state.newList = [...n];
            },
            {
                immediate: true
            }
        );

        return {
            columns,
            ruleTableRef,
            ...toRefs(state),
            jumpToProList,

            handleMouseEnter,
            handleMouseLeave
        };
    }
});
</script>

<style scoped>
</style>